import React from "react";
import styles from "./index.less";
import { Tabs } from "antd";
import CollapseAccordion from './../CollapseAccordion';
import { ChannelContext,ChannelEnum } from './channel-context'
const { TabPane } = Tabs;

function callback(key) {
  // todo 这里可以调用dva数据的方案
  console.log('tab = '+ key);
}

export default () => (
  <div className={styles.container}>
    <div id="components-tabs-demo-basic">

      <Tabs defaultActiveKey={ChannelEnum.member1} onChange={callback}>
        <TabPane tab="影视专区" key={ChannelEnum.member1}>
          <ChannelContext.Provider value={ChannelEnum.member1}>
            <CollapseAccordion />
          </ChannelContext.Provider>
        </TabPane>

        <TabPane tab="网红专区" key={ChannelEnum.member2}>
          {/* 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。
          Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，
          因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。 */}
          <ChannelContext.Provider value={ChannelEnum.member2}>
            <CollapseAccordion />
          </ChannelContext.Provider>
        </TabPane>
      </Tabs>
    </div>
  </div>
);
